<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>java表单</title>
		
		<!--引入外部第三方css文件,rel固定值：样式表，href链接地址
		.min意思是最小文件，压缩（把文件所有内容换行和空格缩进都去掉）
		一行，文件120988英文字格式
		-->
		<link rel="stylesheet"href="bootstrap.min.css"/>
	</head>
	<body>
		<div class="container">
			<h3>学生信息管理系统</h3>
			
			<div class="form-group">
				<!--lable标签for属性光标定位，点击后可以对应id的框-->
				<label for="name">姓名</label>
				<!--文本输入框 ，h5的placeholder新特性-->
				<input type="text"name="name" id="name" 
				   class="form-control"
				   placeholder="请输入姓名..."
				/>
			</div>	
			
			<div class="form-group">
				<label for="age">年龄</label>
				<input type="number"name="age" id="age"
				    class="form-control"
				    placeholder="请输入年龄..."
				 />
			</div>
			<div class="form-group">
				<label for="sex">性别：(单选框)</label>
				<div class="form-inline">
				<!--radio互斥，同名只能选择一个-->
				     <input type="radio"name="sex"id="sex"checked="checked" />男
				</div>
				<div class="form-inline">
				     <input type="radio"name="sex"id="sex" />女
				</div>
			</div>
			
			<div class="form-group">
				<label for="hobby">爱好：(多选)</label>
				<div></div>
				<div class="checkbox-inline">
				    <input type="checkbox"chackbox="chackbox"name="hobby"id="hobby"/>乒乓球
				</div>
				<div class="checkbox-inline">
				    <input type="checkbox"name="hobby"id="hobby" />爬山
				</div>
				<div class="checkbox-inline">
				    <input type="checkbox"name="hobby"id="hobby" />唱歌
				</div>
				<div class="checkbox-inline">
				    <input type="checkbox"name="hobby"id="hobby" />篮球
				</div>
			</div>
			<div  class="form-group">
				<label for="edu">学历：（下拉框）</label>		
				<!--单选，选择“幼儿园”，表单提交“1”性能高-->
				<select name="edu"id="edu"class="form-control">
					<option value="1">幼儿园</option>
					<option value="2">小学</option>
					<option value="3">初中</option>
					<option value="4">高中</option>
					<option value="5">中专</option>
					<option value="6">大专</option>
					<option value="7"selected="selected">本科</option>
					<option value="8">研究生</option>
					<option value="9">博士</option>
				</select>
			</div>
			<div class="form-group">
				<!--class属性支持多个样式，样式之间，用多个空格隔开-->
				<input class="btn btn-primary"type="button"name="submit"value="保存"/>
				<button class="btn btn-danger"name="clear">取消</button>
			</div>
		</div>
	</body>
</html>
